<template>
	<view class="page" :style="{paddingTop: `${topHeight}px`}">
		<view class="linear" :style="{top: `-${topHeight}px`}"></view>
		<view class="header">
			<view>
				<view class="h-l" @tap="goBack">
					<up-icon name="arrow-left" color="#fff"></up-icon>
				</view>
			</view>
			<view class="h-c">
				<text style="color: #fff;">绿港工程</text>
			</view>
			<view class="h-r">
				<!-- <up-icon color="#fff" name="scan" size="28"></up-icon> -->
			</view>
		</view>
		
		<view class="header-search">
			<view class="search1" @tap="selectDate">
				<text class="tip">{{searchForm.dateStr}}</text>
				<up-icon name="arrow-down-fill" color="#fff" size="14"></up-icon>
			</view>
			<view class="search2" @tap="selectMember">
				<up-icon name="account" color="#fff" size="18"></up-icon>
				<text class="tip">成员</text>
				<up-icon name="arrow-down-fill" color="#fff" size="14"></up-icon>
			</view>
			<view class="search3">
				<up-icon name="search" color="#fff" size="18"></up-icon>
				<text class="tip">搜照片</text>
			</view>
		</view>
		<view class="header-scroll">
			<view style="padding: 20rpx;">
				<scroll-view scroll-x="true" class="scroll-view">
					<view>
						<view class="scroll-item" style="width: 300rpx; background-color: #ECF6FF;">
							<view style="display: flex;flex-direction: column;justify-content: space-between;height: 100%;">
							<view>
								<text>已同步</text><text>{{pictureTotal.todayTotal}}</text><text>张</text>
							</view>
							<text style="color: #909399;">全部照片{{ pictureTotal.total/10000 }}万张</text>
							</view>
						</view>
						<view class="scroll-item" style="width: 150rpx;background-color: #E8F3EB;">
							<view style="display: flex;flex-direction: column;justify-content: space-between;height: 100%;">
							<view>
								<text>10/53</text><text>人</text>
							</view>
							<text style="color: #909399;">考勤统计</text>
							</view>
						</view>
						<view class="scroll-item" style="width: 150rpx;background-color: #E8F3EB;">
							<view style="display: flex;flex-direction: column;justify-content: space-between;height: 100%;">
							<view>
								<text>0</text><text>张</text>
							</view>
							<text style="color: #909399;">评论照片</text>
							</view>
						</view>
						<view class="scroll-item" style="width: 150rpx;background-color: #ECF6FF;">
							<view style="display: flex;flex-direction: column;justify-content: space-between;height: 100%;">
							<view>
								<text>0</text><text>个</text>
							</view>
							<text style="color: #909399;">拜访地点</text>
							</view>
						</view>
					</view>
					<!-- <view style="margin-top: 20rpx;">
						<up-tag text="照片台账" plain shape="circle" size="mini" color="#0cc185" borderColor="#0cc185" style="margin-right: 10rpx;"></up-tag>
						<up-tag text="团队水印" plain shape="circle" size="mini" style="margin-right: 10rpx;"></up-tag>
						<up-tag text="上传照片" plain shape="circle" size="mini" style="margin-right: 10rpx;"></up-tag>
						<up-tag text="整改记录" plain shape="circle" size="mini" style="margin-right: 10rpx;"></up-tag>
						<up-tag text="电脑后台" plain shape="circle" size="mini" style="margin-right: 10rpx;"></up-tag>
						<up-tag text="通知" plain shape="circle" size="mini" style="margin-right: 10rpx;"></up-tag>
						<up-tag text="更多" plain shape="circle" size="mini" style="margin-right: 10rpx;"></up-tag>
					</view> -->
				</scroll-view>
			</view>
			<view style="background-color: #f0f0f0;height: 10rpx;"></view>
			<!-- tabs -->
			<view style="border-bottom: 1px solid #f0f0f0;">
				<up-tabs :list="tabList" :current="tabIndex" @tap="switchTab"
					:inactiveStyle="{color:'#909399'}"/>
			</view>
			<!-- 工程水印 -->
			<view style="padding: 20rpx;">
				<scroll-view scroll-y="true" style="height: 65vh;" v-if="byTime" @scrolltolower="handlePage">
					<view v-if="tableData && tableData.length > 0" class="table-list" v-for="(item, index) in tableData">
					  <view class="table-row">
						  <view v-if="item.imgUrl" class="table-left">
							<image :src="item.imgUrl"></image>
						  </view>
						  <view v-else class="table-left2" >
						  	<text>{{ item.workerName.slice(-2) }}</text>
						  </view>
						  <view class="table-right">
							<view style="width: 630rpx;margin-bottom: 15rpx;"><text>{{ item.workerName }}</text></view>
							
							<view class="pictures">
								<view class="pic-list" @click="lookImg2(index)">
									<image style="width: 145rpx;height: 145rpx;" mode="scaleToFill" :src="item.filePath"></image>
								</view>
							</view>
							<view style="display: flex;flex-direction: row;justify-content: space-between;font-size: 24rpx;">
								<text style="color: #909399;">{{ item.shootTimeHm }}</text>
								<text style="color: #5E6C8F;">{{ item.shootAddress }}</text>
							</view>
							<!-- <view style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 15rpx;background: linear-gradient(to right, #fff, #f0f0f0);padding: 5rpx 0;">
								<text style="color: #909399;">上次拍照:4.0小时前,200米</text>
								<view style="display: flex;flex-direction: row;align-items: center;">
									<text style="color: #5E6C8F;">查看路线</text>
									<up-icon name="arrow-right" size="16"></up-icon>
								</view>
							</view> -->
							<view style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 15rpx;">
								<view style="display: flex;flex-direction: row;align-items: center;color: #909399;">
									<up-icon name="share-square" size="18" color="#909399"></up-icon>
									<text>分享</text>
								</view>
								<view style="display: flex;flex-direction: row;align-items: center;color: #909399;">
									<up-icon name="chat" size="18" color="#909399"></up-icon>
									<text>评论</text>
								</view>
								<view style="display: flex;flex-direction: row;align-items: center;color: #909399;">
									<up-icon name="setting" size="16" color="#909399"></up-icon>
									<text>提整改</text>
								</view>
								<view style="display: flex;flex-direction: row;align-items: center;color: #3f85ff;">
									<up-icon name="chat" size="18" color="#3f85ff"></up-icon>
									<text>发消息</text>
								</view>
							</view>
						  </view>
					  </view>
					</view>
					<view v-else style="text-align: center;color: #909399;">
						<text>暂无数据</text>
					</view>
					<up-loadmore :status="loading" :nomore-text="nomoreText" color="#909399"/>
				</scroll-view>
				<scroll-view scroll-y="true" style="height: 65vh;" v-if="byPerson" @scrolltolower="handlePage">
				  <view class="header-scroll2">
				  	<scroll-view scroll-x="true" class="scroll-view">
						<view class="scroll-item2" style="background-color: #FAFAF0;padding: 15rpx;">
							<view class="rank">
								<view class="rank-row">
									<text style="color: #E6A23C;">今日早到榜</text>
									<image src="@/static/icon/thumb.svg" style="width: 1rem;height: 1rem;"></image>
								</view>
								<view class="rank-row" v-for="(item,idx) in rank1">
									<view>
										<text>{{ idx+1 }}</text>
										<text>{{ ' '+item.workerName }}</text>
									</view>
									<text>{{ item.createDateHm }}</text>
								</view>
							</view>
						</view>
				  		<view class="scroll-item2" style="background-color: #E8F3EB;padding: 15rpx;">
							<view class="rank">
								<view class="rank-row">
									<text>昨日晚走榜</text>
									<image src="@/static/icon/night.svg" style="width: 1rem;height: 1rem;"></image>
								</view>
								<view class="rank-row" v-for="(item,idx) in rank2">
									<view>
										<text>{{ idx+1 }}</text>
										<text>{{ ' '+item.workerName }}</text>
									</view>
									<text>{{ item.updateDateHm }}</text>
								</view>
							</view>
						</view>
				  		<view class="scroll-item2" style="background-color: #F9F9F9;padding: 15rpx;">
				  			<view class="rank">
				  				<view class="rank-row">
				  					<text>昨日工时榜</text>
				  					<image src="@/static/icon/clock.svg" style="width: 0.8rem;height: 0.8rem;"></image>
				  				</view>
				  				<view class="rank-row" v-for="(item,idx) in rank3">
				  					<view>
				  						<text>{{ idx+1 }}</text>
				  						<text>{{ ' '+item.workerName }}</text>
				  					</view>
				  					<text>{{ item.workHours+'小时' }}</text>
				  				</view>
				  			</view>
				  		</view>
						<view class="scroll-item2" style="background-color: #F2FCF3;padding: 15rpx;">
							<view class="rank">
								<view class="rank-row">
									<text style="color: #638160;">今日拍照榜</text>
									<image src="@/static/icon/image.svg" style="width: 1rem;height: 1rem;"></image>
								</view>
								<view class="rank-row" v-for="(item,idx) in rank4">
									<view>
										<text>{{ idx+1 }}</text>
										<text>{{ ' '+item.workerName }}</text>
									</view>
									<text>{{ item.pictureNum+'张' }}</text>
								</view>
							</view>
						</view>
				  		<view class="scroll-item2" style="background-color: #FEF5F6;padding: 15rpx;">
				  			<view class="rank">
				  				<view class="rank-row">
				  					<text style="color: #BE6D73;">今日迟到榜</text>
				  					<image src="@/static/icon/alarmClock.svg" style="width: 1rem;height: 1rem;"></image>
				  				</view>
				  				<view class="rank-row" v-for="(item,idx) in rank5">
				  					<view>
				  						<text>{{ idx+1 }}</text>
				  						<text>{{ ' '+item.workerName }}</text>
				  					</view>
				  					<text>{{ item.shootTimeHm }}</text>
				  				</view>
				  			</view>
				  		</view>
				  	</scroll-view>
				  </view>
				  <!--施工日志列表-->
				  <view v-if="tableData && tableData.length > 0" class="table-list" v-for="(item, index) in tableData">
					  <view class="table-row">
						  <view class="table-left" v-if="item.imgUrl">
							<image :src="item.imgUrl"></image>
						  </view>
						  <view v-else class="table-left2" >
							  <text>{{ item.workerName.slice(-2) }}</text>
						  </view>
						  <view class="table-right">
							<view><text>{{ item.workerName }}</text></view>
							<view class="total">
								<view style="width: 140rpx;">
									<view style="color: #909399;">照片数</view>
									<view>
										<text style="font-size: 30rpx;">{{ item.pictureNum }}</text>
										<text>张</text>
									</view>
								</view>
								<view style="border-right: 1px solid #f0f0f0;margin: 0 20rpx;"></view>
								<view style="width: 140rpx;">
									<view style="color: #909399;">工时</view>
									<view>
										<text style="font-size: 30rpx;">{{ item.workHours }}</text>
										<text>小时</text>
									</view>
								</view>
								<view style="border-right: 1px solid #f0f0f0;margin: 0 20rpx;"></view>
								<view style="width: 210rpx;">
									<view style="color: #909399;">上下班</view>
									<view>
										<text style="font-size: 30rpx;">{{item.startTime+' - '+item.offTime}}</text>
									</view>
								</view>
							</view>
							<view class="pictures">
								<view class="pic-list" @click="lookImg2(idx)" v-for="(d, idx) in item.consLogDetailList">
									<image style="width: 145rpx;height: 145rpx;" mode="scaleToFill" :src="d.filePath"></image>
									<text class="shoot_time">{{ d.shootTimeHm }}</text>
								</view>
							</view>
							<!-- <view style="display: flex;flex-direction: row;justify-content: space-between;">
								<view style="display: flex;flex-direction: row;align-items: center;color: #5E6C8F;" @click="viewRoute(item.consLogDetailList)">
									<text style="margin-right: 5rpx;">6个地点</text>
									<text>查看路线</text>
									<up-icon name="arrow-right" size="16"></up-icon>
								</view>
								<view style="display: flex;flex-direction: row;align-items: center;color: #3f85ff;">
									<up-icon name="chat" size="18" color="#3f85ff"></up-icon>
									<text>发消息</text>
								</view>
							</view> -->
						  </view>
					  </view>
				  </view>
				  <view v-else style="text-align: center;color: #909399;">
					  <text>暂无数据</text>
				  </view>
				  <up-loadmore :status="loading" :nomore-text="nomoreText" color="#909399"/>
				</scroll-view>
			</view>
		</view>
		<!-- 底部导航 -->
		<CameraTabbar :value="0"></CameraTabbar>
		
		<!-- 日历弹窗 -->
		<up-calendar :show="calendarShow" @close="closeCalendar" 
			@confirm="handleDate" :show-confirm="false"
			:minDate="searchForm.minDate" :maxDate="searchForm.maxDate" :closeOnClickOverlay="true">
		</up-calendar>
		<!-- 成员弹窗 -->
		<up-popup :show="memberShow" :round="10" mode="bottom"  @close="closeMember" :customStyle="{height: `${screenHeight}rpx`}">
			<view class="member-popup">
				<view class="title">
					<text></text>
					<text>筛选成员</text>
					<up-icon name="close" @click="closeMember"></up-icon>
				</view>
				<up-line></up-line>
				<view style="padding: 5px 15px 0 15px;">
					<up-input prefixIcon="search" placeholder="请输入姓名搜索" @change="handleSearch"></up-input>
				</view>
				<scroll-view scroll-y="true" style="height: 34vh;padding: 10px 0;">
					<view class="scroll-list" v-for="(item,index) in memberList">
						<view class="list-item">
							<radio-group @change="radioChange">
								<radio :value="item.worker_name" :checked="index === currentCheck" style="transform: scale(0.8);"/>
							</radio-group>
							<image v-if="item.img_url" :src="item.img_url" class="avatar" mode="aspectFill"></image>
							<view v-if="!item.img_url" class="avatar-text">
								<text style="color: #fff;">{{ item.worker_name.slice(-2) }}</text>
							</view>
							<text>{{ item.worker_name }}</text>
						</view>
						<view style="display: flex;justify-content: center;align-items: center;">
							<text style="color: #909399;"></text>
						</view>
					</view>
				</scroll-view>
				<view style="padding: 0 15px;">
					<up-button type="primary" text="确定" @click="doConfirmMember"></up-button>
				</view>
			</view>
		</up-popup>
		
		<!-- 水印相机拍照后页面 隐藏在底层（为了处理添加水印 因为父页面为nvue页面，画布添加不了水印）-->
		<view style="height: 0;">
			<!-- <view>拍摄结果预览图</view> -->
			<!-- <view class="img-list">
				<view class="img-item" v-for="(item,index) in imgList" :key="index" @click="lookImg(index)">
					<image :src="item"></image>
				</view>
			</view> -->
			<canvas id="canvas-clipper" canvas-id="canvas-clipper" type="2d"
				:style="{width: canvasSiz.width+'px',height: canvasSiz.height+'px',position: 'absolute',left:'-500000px',top: '-500000px'}" />
		</view>
	</view>
</template>

<script>
import base from '@/apis/cloud/base';
import engApi from '@/apis/cloud/engineering';
import CameraTabbar from '@/components/watermarkCamera/tabbar.vue';
import { useChatStore, useGroupStore, useSocketStore, useUserStore } from '@/pinia-store/user';
import { mapStores } from 'pinia';
import dayjs from "dayjs";
import { getCurrentInstance} from "vue";
var _this;
export default {
	name: 'MyTeam',
	components: {
		CameraTabbar,
	},
	data () {
		return {
			userInfo: {},
			waterMarkInfo:{},
			topHeight:0,
			screenHeight:1500,
			byPerson:true,
			byTime:false,
			tabIndex:1,
			pictureTotal:{},
			rank1: [],//今日早到榜
			rank2: [],//昨日晚走榜
			rank3: [],//昨日工时榜
			rank4: [],//今日拍照榜
			rank5: [],//今日迟到榜
			tabList: [
				{name:'按时间'},
				{name:'按人员'},
			],
			calendarShow:false,
			memberShow:false,
			memberList:[],
			currentCheck:-1,
			checkedUser:null,
			searchForm: {
				date:dayjs().format('YYYY-MM-DD'),
				dateStr:dayjs().format('MM月DD日')+'(今)',
				minDate:dayjs().subtract(2, 'month').format('YYYY-MM-DD'),
				maxDate:dayjs().format('YYYY-MM-DD'),
			},
			imgList: [],
			imgList2: [],
			canvasSiz: {
				width: 188,
				height: 273
			},
			tableData: [],
			pageNo:1,
			pageSize:5,
			total:0,
			loading:'',
			nomoreText:'我是有底线的',
		}
	},
	computed: {
	  	...mapStores(useChatStore, useGroupStore, useUserStore, useSocketStore),
	},
	created(){
		_this = this;
	    let app = uni.getSystemInfoSync();
	  	this.topHeight = app.statusBarHeight;
		this.screenHeight = app.screenHeight;
		
		//let that = this;
		const instance = getCurrentInstance().proxy;
		const eventChannel = instance.getOpenerEventChannel(); 
		//拍照后添加水印
		eventChannel.on('snapshotInfo', async function(data) {
			//console.log("more==snapshotInfo===", data)
			_this.waterMarkInfo = data.snapshot;
			_this.watermark(data.snapshot);
		});
		//直接跳转
		eventChannel.on('jumpType', async function(data) {
			//console.log("more==snapshotInfo===", data)
			if(data == 'direct') {
				_this.getList();
			}
			
		});
		
	},
	onLoad(options) {
	  	
		// 获取APP用户信息
		_this.userInfo = _this.userStore.user;
		// 统计数据
		_this.totalData();
		// 排名榜单
		_this.getRank();
		//拍照时，才会添加水印
		if(options.snapshot) {
			let data = JSON.parse(decodeURIComponent(options.snapshot));
			_this.waterMarkInfo = data;
			this.watermark(data);
		}
		
		//_this.getList();
	},
	methods:{
		handlePage(e) {
			console.log("handlePage====", e);
			_this.pageNo++;
			if((_this.pageNo-1)*_this.pageSize <= _this.total) {
				_this.getList();
			}else {
				_this.loading = "nomore";
			}
		},
		viewRoute(detail) {
			//console.log("123====", detail);
			uni.navigateTo({
				url: "/pages/watermarkCamera/photoRoute?detail="+encodeURIComponent(JSON.stringify(detail))
			})
		},
		radioChange(evt) {
			for (let i = 0; i < this.memberList.length; i++) {
				if (this.memberList[i].worker_name === evt.detail.value) {
					this.currentCheck = i;
					this.checkedUser = this.memberList[i];
					break;
				}
			}
		},
		async getMembers(deptId, workerName) {
			const msg = await base.getUserByDept({ depart_id: deptId,worker_name:workerName});
			if(msg.status > 0) {
				//console.log("123=====", msg);
				_this.memberList = msg.data;
			}
		},
		handleSearch(val){
			_this.getMembers(33, val);
		},
		doConfirmMember() {
			if(!_this.checkedUser) {
				uni.$u.toast('请选择人员');
				return;
			}
			_this.memberShow = false;
			_this.totalData();
			_this.getRank();
			_this.getList();
		},
		async totalData() {
			const params = {
				shootDate:_this.searchForm.date,
			};
			const res = await engApi.getPictureTotal(params);
			if(res.code == 200) {
				_this.pictureTotal = res.data;
			}
		},
		async getRank() {
			const params = {
				pageNo:1,
				pageSize:3,
				shootDate:_this.searchForm.date,
			};
			const res = await engApi.queryRank(params);
			if(res.code == 200) {
				//console.log("getRank=================", res);
				_this.rank1 = res.data.rank1;
				_this.rank2 = res.data.rank2;
				_this.rank3 = res.data.rank3;
				_this.rank4 = res.data.rank4;
				_this.rank5 = res.data.rank5;
			}
		},
		async getList() {
			//_this.tabIndex
			let memberPhone = '';
			if(_this.checkedUser) {
				memberPhone = _this.checkedUser.phone;
			}
			const params = {
				pageNo:_this.pageNo,
				pageSize:_this.pageSize,
				tabIndex:_this.tabIndex,
				shootDate:_this.searchForm.date,
				phone:memberPhone,
			};
			_this.imgList2 = [];
			if(_this.tabIndex == 0) {
				const res = await engApi.queryByTime(params);
				//console.log("getList0====", res);
				if(res.code == 200) {
					_this.total = res.data.total;
					res.data.records.forEach(item=>{
						_this.tableData.push(item);
					});
					_this.tableData.forEach(item=>{
						_this.imgList2.push(item.filePath);
					});
				}
			}else if(_this.tabIndex == 1) {
				const res = await engApi.queryByPerson(params);
				//console.log("getList1====", res);
				if(res.code == 200) {
					_this.total = res.data.total;
					res.data.records.forEach(item=>{
						_this.tableData.push(item);
					});
					
					_this.tableData.forEach(item=>{
						let detailList = item.consLogDetailList;
						detailList.forEach(d=>{
							_this.imgList2.push(d.filePath);
						});
					});
					
				}
			}
			
		},
		  //添加照片水印
		watermark(info) {
		  	//console.log("获取到的数据为", info);
		  	uni.getImageInfo({
		  		src: info.path,
		  		success: function(image) {
		  			console.log(image);
		  			_this.canvasSiz.width = image.width;
		  			_this.canvasSiz.height = image.height;
		  			let maxWidth = image.width - 60;
		  			setTimeout(() => {
		  				let ctx = uni.createCanvasContext('canvas-clipper', _this);
		   
		  				ctx.drawImage(
		  					info.path,
		  					0,
		  					0,
		  					image.width,
		  					image.height
		  				);
		   
		  				//具体位置和相机页面上一致！！！！
						// #ifdef APP-PLUS
						_this.addRemind(ctx, image, info);
						// #endif
						// #ifdef H5
						_this.addRemindH5(ctx, image, info);
						// #endif
						
		  				ctx.draw(false, () => {
		  					uni.canvasToTempFilePath({
		  							destWidth: image.width,
		  							destHeight: image.height,
		  							canvasId: 'canvas-clipper',
		  							fileType: 'jpg',
		  							success: function(res) {
		  								//_this.savePhoto(res.tempFilePath);
										//保存图片到手机相册
										//_this.saveImageToAlbum(res.tempFilePath);
										//处理图片：上传服务器，保存图片路径，水印等信息
										_this.handleImg(res.tempFilePath);
		  							}
		  						},
		  						_this
		  					);
		  				});
		  			}, 500)
		   
		   
		  		}
		  	});
		},
		addRemind(ctx, image, info) {
			let x=50,y=image.height-540,w=700,h=410,r=10;
			//水印 logo
			ctx.setFontSize(25);
			ctx.setFillStyle('rgba(255, 255, 255, 0.6)');
			ctx.fillRect(x, y, 200, 120);
			ctx.drawImage('/static/watermark-camera/logo3.png', x+20, y+24, 160, 72);
			//水印 项目名称
			ctx.setFillStyle('rgba(144, 212, 187, 0.5)');
			ctx.fillRect(x+200, y, 500, 120);
			ctx.setFillStyle('white');
			ctx.fillText(_this.waterMarkInfo.info.projName, x+210, y+70);
			//水印中间部分
			ctx.setFillStyle('rgba(225, 227, 229, 0.6)');
			ctx.fillRect(x, y+120, w, 210);
			ctx.setFillStyle('black');
			ctx.fillText('施工内容：'+_this.waterMarkInfo.info.content, 60, y+150);
			ctx.fillText('拍摄时间：'+_this.waterMarkInfo.info.time, 60, y+190);
			ctx.fillText('天        气：'+_this.waterMarkInfo.info.weather, 60, y+230);
			ctx.fillText('地        点：'+_this.waterMarkInfo.info.address, 60, y+270);
			ctx.fillText('方   位   角：'+_this.waterMarkInfo.info.alpha, 60, y+310);
			//水印底部 施工单位
			ctx.setFillStyle('rgba(144, 212, 187, 0.5)');
			ctx.fillRect(x, y+330, w, 70);
			ctx.setFillStyle('white');
			ctx.fillText('施工单位：'+_this.waterMarkInfo.info.consUnit, x+10, y+375);
		},
		addRemindH5(ctx, image, info) {
			let x=20,y=image.height-200,w=330,h=410,r=10;
			//水印 logo
			ctx.setFontSize(12);
			ctx.setFillStyle('rgba(255, 255, 255, 0.6)');
			ctx.fillRect(x, y, 80, 50);
			ctx.drawImage('/static/watermark-camera/logo3.png', x, y, 80, 50);
			//水印 项目名称
			ctx.setFillStyle('rgba(144, 212, 187, 0.5)');
			ctx.fillRect(x+80, y, 250, 50);
			ctx.setFillStyle('white');
			ctx.fillText(_this.waterMarkInfo.info.projName, x+80, y+30);
			//水印中间部分
			ctx.setFillStyle('rgba(225, 227, 229, 0.6)');
			ctx.fillRect(x, y+50, w, 110);
			ctx.setFillStyle('black');
			ctx.fillText('施工内容：'+_this.waterMarkInfo.info.content, x+5, y+70);
			ctx.fillText('拍摄时间：'+_this.waterMarkInfo.info.time, x+5, y+90);
			ctx.fillText('天        气：'+_this.waterMarkInfo.info.weather, x+5, y+110);
			ctx.fillText('地        点：'+_this.waterMarkInfo.info.address, x+5, y+130);
			ctx.fillText('方  位  角：'+_this.waterMarkInfo.info.alpha, x+5, y+150);
			//水印底部 施工单位
			ctx.setFillStyle('rgba(144, 212, 187, 0.5)');
			ctx.fillRect(x, y+160, w, 30);
			ctx.setFillStyle('white');
			ctx.fillText('施工单位：'+_this.waterMarkInfo.info.consUnit, x, y+180);
		},
		drawRounRect(ctx, x, y, w, h, r, color) {
			ctx.beginPath()
			// 因为边缘描边存在锯齿，最好指定使用 transparent 填充
			ctx.setFillStyle('transparent')
			// 左上角
			ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
			 
			// border-top
			ctx.moveTo(x + r, y)
			ctx.lineTo(x + w - r, y)
			ctx.lineTo(x + w, y + r)
			// 右上角
			ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
			 
			// border-right
			ctx.lineTo(x + w, y + h - r)
			ctx.lineTo(x + w - r, y + h)
			// 右下角
			ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
			 
			// border-bottom
			ctx.lineTo(x + r, y + h)
			ctx.lineTo(x, y + h - r)
			// 左下角
			ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
			 
			// border-left
			ctx.lineTo(x, y + r)
			ctx.lineTo(x + r, y)
			 
			// 这里是使用 fill 还是 stroke都可以，二选一即可，但是需要与上面对应
			ctx.fill()
			
			ctx.closePath()
			// 剪切
			ctx.clip()
			ctx.setFillStyle(color);
			ctx.fillRect(x, y, w, h);
			console.log("draw --- end")
		},
		//保存图片到手机相册
		saveImageToAlbum(snapshotsrc) {
		    uni.saveImageToPhotosAlbum({
				filePath: snapshotsrc,
				success: function (path) {
					console.error('保存相册成功',path);
				},
				fail: function (error) {
					console.error('保存失败', error);
				  
				}
		    });
		},
		handleImg(snapshotsrc) {
			//console.log("snapshotsrc", snapshotsrc);
		  	const account = this.userInfo.chat_account;
		  	//上传服务器
		  	uni.uploadFile({
		  		url: 'https://chat.mfarmers.com:88/phpApi/public/index.php/users/Index/uploadImg?account='+account+
		  			'&to_account=110&department=江苏绿港',
		  		filePath: snapshotsrc,
		  		success: function (res) {
					//console.log("handleImg========",res)
					if(res.statusCode == 200) {
						_this.saveWatermark(JSON.parse(res.data).data);
					}
		  		},
		  		fail: function (error) {
					console.error('上传失败', error);
		  		  
		  		}
		  	});
		},
		async saveWatermark(filePath) {
		  	const params = {
		  		phone: this.userInfo.chat_account,
				projId: _this.waterMarkInfo.info.projId,
				consContent: _this.waterMarkInfo.info.content,
				weather: _this.waterMarkInfo.info.weather,
				shootTime: _this.waterMarkInfo.info.time,
				shootAddress: _this.waterMarkInfo.info.address,
				lngLat: _this.waterMarkInfo.info.lngLat,
				shootDirection: _this.waterMarkInfo.info.alpha,
				consUnit: _this.waterMarkInfo.info.consUnit,
				
				filePath: filePath.replace('thumb_',''),
		  	}
		  	const msg = await engApi.saveWatermark(params);
			//console.log("saveWatermark======", msg);
		  	if(msg.code == 200) {
		  		//查询列表
				_this.getList();
		  	}
		},
		//保存图片到相册，方便核查
		savePhoto(path) {
		  	this.imgList.push(path)
		},
		lookImg(index) {
		  	// 预览图片
		  	uni.previewImage({
		  		current: index,
		  		urls: this.imgList,
		  	});
		},
		lookImg2(index) {
		  	// 预览图片
		  	uni.previewImage({
		  		current: index,
		  		urls: this.imgList2,
		  	});
		},
		switchTab(tabs) {
			  //console.log("123====",tabs)
			  if(tabs.index == 0) {
				  this.byTime = true;
				  this.byPerson = false;
			  }else if(tabs.index == 1) {
				  this.byTime = false;
				  this.byPerson = true;
			  }
			  _this.tabIndex = tabs.index;
			  _this.tableData = [];
			  _this.pageNo = 1;
			  this.getList();
		},
		selectDate() {
			this.calendarShow = true;
		},
		closeCalendar() {
			this.calendarShow = false;
		},
		handleDate(date) {
			//console.log("123====", date[0].substring(5,10));
			this.searchForm.dateStr = date[0].substring(5,10).replace('-','月')+'日';
			if(date[0] == dayjs().format('YYYY-MM-DD')) {
				this.searchForm.dateStr = date[0].substring(5,10).replace('-','月')+'日(今)';
			}
			this.searchForm.date = date[0];
			this.closeCalendar();
			  
			//重新查询数据
			this.totalData();
			this.getRank();
			this.getList();
		},
		selectMember() {
			this.memberShow = true;
			//console.log("123===", _this.screenHeight)
			this.getMembers(33);
		},
		closeMember() {
			this.memberShow = false;
		},
		
		goBack () {
			uni.navigateBack({ delta: 1 });
		}
	}
}
</script>

<style lang="scss" scoped>
	page {
		padding-bottom: 50rpx;
		overflow: hidden;
	}
	.linear {
		position: absolute;
		background: linear-gradient(to bottom, #418EEB, #fff);
		width: 100%;
		height: 600rpx;
		z-index: -1;
	}
	.header {
		position: relative;
		padding: 10rpx;
		padding-right: 20rpx;
		display: flex;
		justify-content: space-between;
		.h-l {
			display: flex;
			align-items: center;
			.title {
				margin-left: 8rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #fff;
			}
		}
	}
	
	.scroll-view {
	  white-space: nowrap;
	}
	
	
	.header-search {
		height: 5vh;
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between; 
		align-items: center;
		.tip {
			color: #fff;
			font-size: 26rpx;
		}
		.search1 {
			width: 300rpx;
			height: 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-between; 
			background-color: #0276cd;
			border-radius: 5rpx;
			padding: 0 15rpx;
		}
		.search2 {
			width: 150rpx;
			height: 50rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #0276cd;
			border-radius: 5rpx;
			padding: 0 15rpx;
		}
		.search3 {
			width: 150rpx;
			height: 50rpx;
			display: flex;
			align-items: center;
			background-color: #0276cd;
			border-radius: 5rpx;
			padding: 0 15rpx;
		}
	}
	.header-scroll {
		border-radius: 15rpx;
		background-color: #fff;
		height: 80vh;
		font-size: 26rpx;
		.scroll-item {
			display: inline-block;
			width: 200rpx; /* 根据需要调整宽度 */
			height: 80rpx; /* 根据需要调整高度 */
			margin-right: 10px; /* 项目之间的间距 */
			background-color: #f0f0f0; /* 背景颜色 */
			font-size: 26rpx;
			border-radius: 10rpx;
			padding: 10rpx;
		}
	}
	
	.header-scroll2 {
		padding-bottom: 20rpx;
		.scroll-item2 {
			display: inline-block;
			width: 250rpx; /* 根据需要调整宽度 */
			height: 180rpx; /* 根据需要调整高度 */
			margin-right: 10px; /* 项目之间的间距 */
			background-color: #f0f0f0; /* 背景颜色 */
			font-size: 26rpx;
			border-radius: 10rpx;
			padding: 10rpx;
			.rank {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 100%;
				.rank-row {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
				}
			}
		}
	}
	.table-list {
		border-bottom: 1px solid #f0f0f0;
		padding-bottom: 15rpx;
		margin-bottom: 20rpx;
		.table-row {
			display: flex;
			flex-direction: row;
			.table-left {
				margin-right: 10rpx;
				image {
					width: 66rpx;
					height: 66rpx;
					border-radius: 5rpx;
				}
			}
			.table-left2 {
				width: 66rpx;
				height: 66rpx;
				margin-right: 10rpx;
				border-radius: 5rpx;
				background-color: #3f85ff;
				display: flex;
				justify-content: center;
				align-items: center;
				text {
					color: #fff;
				}
			}
			.table-right {
				.total {
					display: flex;
					flex-direction: row;
					border: 1px solid #f0f0f0;
					padding: 10rpx 15px;
					margin: 15rpx 0; 
					border-radius: 5rpx;
				}
				.pictures {
					display: flex;
					flex-wrap: wrap;
					.pic-list {
						width: 25%;
						height: 0;
						padding-bottom: 25%; 
						box-sizing: border-box;
						position: relative;
						.shoot_time {
							position: absolute;
							bottom: 0;
							z-index: 999;
							display: flex;
							justify-content: center;
							width: 145rpx;
							color: #fff;
							padding-bottom: 20rpx;
						}
					}
				}
			}
		}
	}
	.member-popup {
		height: 100%;
		.title {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 10px 15px;
		}
		.scroll-list {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			border-bottom: 1px solid #e1e3e5;
			padding: 5px 15px;
			font-size: 26rpx;
			.list-item {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				.avatar {
					width: 66rpx;
					height: 66rpx;
					margin-right: 10rpx;
					border-radius: 10rpx;
				}
				.avatar-text {
					width: 66rpx;
					height: 66rpx;
					border-radius: 10rpx;
					margin-right: 10rpx;
					background-color: #3f85ff;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>